<template>
  <el-dialog title="解决方案" :visible.sync="isPlan" width="80%" :before-close="handleClose" :close-on-click-modal='false'>
    <el-tabs tab-position="left" style="height: 400px;overflow: hidden;">
      <el-tab-pane v-for="item in this.list" :key="item.phase_id" :label="item.phase_title">
        <el-tabs type="border-card" >
          <el-tab-pane v-for="e in item.sub_list" :key="item.phase_id + e.phase_user" :label="e.phase_user" style="height:300px;overflow: hidden;">
            <div style="height:300px;overflow:auto;">
              <div v-for="n in e.json_url" :key="item.phase_id + e.phase_user + n.file_name">
                <!-- <el-link :href="'https://view.officeapps.live.com/op/view.aspx?src='+n.url" target="_blank" type="primary">{{n.file_name}}</el-link> -->
                <el-link :href="n.url" target="_blank" type="primary">{{n.file_name}}</el-link>
                <br>
              </div>
              <div v-html="e.content"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: ['isPlan', 'list'],
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    handleClose () {
      this.$emit('noPlan')
    },
    close (type) {
      this.$emit('noPlan', type)
    }
  }
}
</script>
